<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
    <div class="execution">
        <basic-container>
            <el-dialog
                title="修改"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
                <div>
                    <div class="boxs">
                        签到时间：
                        <el-date-picker
                            v-model="selectTime"
                            type="datetime"
                            value-format="yyyy-mm-dd hh:mm:ss"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                    <div class="boxs">
                        签到人员：
                        <avue-input-tree style="width: 80%;" leaf-only="" multiple v-model="signInUser" placeholder="请选择内容" type="tree" :dic="userList"></avue-input-tree>
                    </div>
                    <div class="boxs">
                        签到备注：
                        <avue-input style="width:80%;" v-model="content" placeholder="请输入内容"></avue-input>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="edit">修 改</el-button>
                </span>
            </el-dialog>
            <el-button @click="back" type="primary">返回</el-button>
            <div class="title">签到创建时间：{{ queryData.signTime }}</div>
            <div class="title">签到人数：{{ queryData.signNum }}/{{queryData.signSum}}</div>
            <div class="title">签到备注：{{ queryData.signNote }}</div>
            <div class="title">签到人员：{{ queryData.signPeopleName }}</div>
            <avue-crud ref="crud"
                :page="page"
                :data="tableData"
                :permission="permissionList"
                :table-loading="tableLoading"
                :option="tableOption"
                @on-load="getList"
                @search-change="searchChange"
                @refresh-change="refreshChange"
                @size-change="sizeChange"
                @current-change="currentChange"
                @row-update="handleUpdate"
                @row-save="handleSave"
                @row-del="rowDel">
                <!-- <template slot="search" slot-scope="{row,size}">
                    组织架构：<el-input placeholder="自定义输入框" :size="size" style="width:200px" v-model="searchForm.organization"></el-input>
                </template> -->
                <template slot-scope="{ row, index }" slot="isSign">
                    <el-button v-if="row.isSign == 1" type="success">已签到</el-button>
                    <el-button v-if="row.isSign == 2" type="danger">未签到</el-button>
                </template>
                <template slot-scope="{ row, index }" slot="menu">
                    <el-button v-if="row.isSign == 2" style="margin-left:10px;" size="small" type="text" @click.native="signIn(row)">后台签到</el-button>
                </template>
                <template slot="menuLeft">
                    <el-button
                        type="primary"
                        :loading="gouxuanLoading"
                        size="small"
                        @click="excel"
                        >导出人员签到表</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        @click="dialogVisible = true"
                        >修改会议签到信息</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        @click="downloadCode"
                        >下载签到二维码</el-button
                    >
                </template>
            </avue-crud>

        </basic-container>
    </div>
</template>

<script>
    import {fetchList1, getObj, addObj, putObj, delObj, signIn, getUsers, editTable, getDetail, getCode} from '@/api/circlemeetingsign'
    import {tableOption} from '@/const/crud/circlemeetingsign'
    import {mapGetters} from 'vuex'

    export default {
        name: 'circlemeetingsign',
        data() {
            return {
                searchForm: {},
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption,
                queryData: {},
                gouxuanLoading: false,
                dialogVisible: false,
                userList: [],
                selectTime: '',
                signInUser: [],
                content: '',
            }
        },
        computed: {
            ...mapGetters(['permissions']),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permissions.circleMeetingSign_circlemeetingsign_add, false),
                    delBtn: this.vaildData(this.permissions.circleMeetingSign_circlemeetingsign_del, false),
                    editBtn: this.vaildData(this.permissions.circleMeetingSign_circlemeetingsign_edit, false)
                };
            }
        },
        mounted () {
            this.$emit('change_leftFlag', {
                type: 'change',
                val: false
            })
            this.queryData = this.$route.query
            this.selectTime = this.queryData.createTime
            this.signInUser = this.queryData.signPeople.split(',')
            this.content = this.queryData.signNote
            getUsers().then(res => {
                // console.log(res)
                if (res.status == 200) {
                    let arr = res.data.data.circleOrganizationalVoList
                    for (let i = 0 ; i < arr.length; i++) {
                        arr[i].label = arr[i].name
                        arr[i].value = arr[i].id
                        arr[i].children = arr[i].userVoList
                        for (let j = 0; j < arr[i].children.length; j++) {
                            arr[i].children[j].label = arr[i].children[j].name
                            arr[i].children[j].value = arr[i].children[j].id
                        }
                    }
                    this.userList = arr
                }
            })
        },
        methods: {
            getList(page, params) {
                this.tableLoading = true
                console.log(this.$route)
                fetchList1(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize,
                    meetingId: this.$route.query.id,
                    name: '',
                    organization: ''
                }, params, this.searchForm )).then(response => {
                    console.log(response)
                    let arr = response.data.data.circleMeetingSignPage.records
                    for (let i = 0; i < arr.length; i++) {
                        arr[i].organization = arr[i].organizationalName
                    }
                    this.tableData = arr
                    this.page.total = response.data.data.circleMeetingSignPage.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除ID为' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.id)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            },
            back() {
                this.$router.go(-1)
            },
            signIn(data) {
                console.log(data)
                // const _this = this
                this.tableLoading = true
                signIn(data.id).then(res => {
                    this.tableLoading = false
                    if (res.data.data == true) {
                        this.$message.success('签到成功')
                        this.getList(this.page)
                    } else {
                        this.$message.error('签到失败')
                    }
                    // console.log(res)
                })
            },
            excel(data) {
                // this.gouxuanLoading = true;
                // console.log(this.searchForm);
                window.open('/circlemeetingsign/sign/excel?id=' + this.queryData.id)
                // this.gouxuanLoading = false;
            },
            downloadCode() {
                // this.gouxuanLoading = true;
                // console.log(this.searchForm);
                // window.open('/criclemeeting/sign/qr?id=' + this.queryData.id)
                // this.gouxuanLoading = false;
                getCode(this.queryData.id).then(res => {
                    // console.log(res)
                    window.open(res.data.data)
                })
            },
            edit() {
                editTable({
                    id: this.queryData.id,
                    uids: this.signInUser,
                    signPeople: this.signInUser.toString(),
                    signTime: this.selectTime,
                    signNote: this.content
                }).then(res => {
                    // console.log(res)
                    if (res.status == 200) {
                        this.$message.success('修改成功')
                        this.dialogVisible = false
                        getDetail(this.queryData.id).then(res => {
                            console.log(res)
                            this.queryData = res.data.data
                        })
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .title {
        line-height: 40px;
    }
    .boxs {
        margin-bottom: 10px;
    }
</style>
